<template>
    <div class="edit-popup">
        <popup ref="popupRef" :title="popupTitle" :async="true" width="550px" @confirm="handleSubmit" @close="handleClose">
            <el-form ref="formRef" :model="formData" label-width="84px" :rules="formRules">
                <el-form-item label="支付方式">
                    <el-radio :label="popupTitle" :model-value="popupTitle" />
                </el-form-item>
                <el-form-item label="显示名称" prop="name">
                    <el-input v-model="formData.name" placeholder="请输入显示名称" />
                </el-form-item>
                <el-form-item label="显示图标" prop="image">
                    <div>
                        <material-picker :limit="1" :disabled="false" v-model="formData.icon" />
                        <span class="form-tips">建议尺寸：200*200px</span>
                    </div>
                </el-form-item>
                <template v-if="formData.pay_way == PayWayEnum.WECHAT">
                    <el-form-item prop="config.interface_version" label="微信支付接口版本">
                        <div>
                            <el-radio-group v-model="formData.config.interface_version">
                                <el-radio label="v3"></el-radio>
                            </el-radio-group>
                            <div class="form-tips">暂时只支持V3版本</div>
                        </div>
                    </el-form-item>

                    <el-form-item label="商户类型" prop="config.merchant_type">
                        <div>
                            <el-radio-group v-model="formData.config.merchant_type">
                                <el-radio label="ordinary_merchant">普通商户</el-radio>
                            </el-radio-group>
                            <div class="form-tips">暂时只支持普通商户类型，服务商户类型模式暂不支持</div>
                        </div>
                    </el-form-item>

                    <el-form-item label="微信支付商户号" prop="config.mch_id">
                        <div class="flex-1">
                            <el-input v-model="formData.config.mch_id" placeholder="请输入微信支付商户号" />
                            <div class="form-tips">微信支付商户号（MCHID）</div>
                        </div>
                    </el-form-item>

                    <el-form-item label="商户API密钥" prop="config.pay_sign_key">
                        <el-input v-model="formData.config.pay_sign_key" placeholder="请输入微信支付商户API密钥" />
                        <span class="form-tips">微信支付商户API密钥（paySignKey）</span>
                    </el-form-item>

                    <el-form-item label="微信支付证书" prop="config.apiclient_cert">
                        <el-input type="textarea" rows="3" v-model="formData.config.apiclient_cert" placeholder="请输入微信支付证书" />

                        <span class="form-tips"> 微信支付证书（apiclient_cert.pem），前往微信商家平台生成并黏贴至此处 </span>
                    </el-form-item>

                    <el-form-item label="微信支付证书密钥" prop="config.apiclient_key">
                        <el-input type="textarea" rows="3" v-model="formData.config.apiclient_key" placeholder="请输入微信支付证书密钥" />
                        <span class="form-tips"> 微信支付证书密钥（apiclient_key.pem），前往微信商家平台生成并黏贴至此处 </span>
                    </el-form-item>

                    <el-form-item label="支付授权目录">
                        <div>
                            <div>
                                <span class="mr-[20px]">{{ formData.domain }}</span>
                                <el-button link type="primary" v-copy="formData.domain"> 复制 </el-button>
                            </div>
                            <span class="form-tips"> 支付授权目录仅用于参考，复制后前往微信商家平台填写 </span>
                        </div>
                    </el-form-item>
                </template>
                <template v-if="formData.pay_way == PayWayEnum.ALIPAY">
                    <el-form-item label="模式" prop="config.mode">
                        <div>
                            <el-radio-group v-model="formData.config.mode">
                                <el-radio label="normal_mode">普通模式</el-radio>
                            </el-radio-group>
                            <div class="form-tips">暂时仅支持支付宝普通模式</div>
                        </div>
                    </el-form-item>

                    <el-form-item label="商户类型" prop="config.merchant_type">
                        <div>
                            <el-radio-group v-model="formData.config.merchant_type">
                                <el-radio label="ordinary_merchant">普通商户</el-radio>
                            </el-radio-group>
                            <div class="form-tips">暂时只支持普通商户类型，服务商户类型模式暂不支持</div>
                        </div>
                    </el-form-item>

                    <el-form-item label="应用ID" prop="config.app_id">
                        <div class="flex-1">
                            <el-input v-model="formData.config.app_id" placeholder="请输入支付宝应用ID" />
                            <span class="form-tips"> 支付宝应用APP_ID </span>
                        </div>
                    </el-form-item>

                    <el-form-item label="应用私钥" prop="config.private_key">
                        <div class="flex-1">
                            <el-input type="textarea" rows="3" v-model="formData.config.private_key" placeholder="请输入支付宝应用私钥" />
                            <span class="form-tips">支付宝应用私钥（private_key） </span>
                        </div>
                    </el-form-item>

                    <el-form-item label="支付宝公钥" prop="config.ali_public_key">
                        <div class="flex-1">
                            <el-input type="textarea" rows="3" v-model="formData.config.ali_public_key" placeholder="请输入支付宝公钥" />
                            <span class="form-tips">支付宝公钥（ali_public_key） </span>
                        </div>
                    </el-form-item>
                </template>
                <el-form-item label="排序" prop="sort">
                    <div>
                        <el-input-number v-model="formData.sort" :min="0" :max="9999" />
                        <div class="form-tips">默认为0， 数值越大越排前</div>
                    </div>
                </el-form-item>
            </el-form>
        </popup>
    </div>
</template>
<script lang="ts" setup>
import type { FormInstance, FormRules } from "element-plus"
import { getPayConfig, setPayConfig } from "@/api/setting/pay"
import Popup from "@/components/popup/index.vue"
const emit = defineEmits(["success", "close"])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
enum PayWayEnum {
    BALANCE = 1,
    WECHAT = 2,
    ALIPAY = 3
}
const popupTitle = computed(() => {
    switch (formData.pay_way) {
        case PayWayEnum.BALANCE:
            return "余额支付"
        case PayWayEnum.WECHAT:
            return "微信支付"
        case PayWayEnum.ALIPAY:
            return "支付宝支付"
    }
})
const formData = reactive({
    id: "",
    pay_way: 0,
    name: "",
    icon: "",
    sort: 0,
    remark: "",
    domain: "",
    config: {
        interface_version: "",
        merchant_type: "",
        mch_id: "",
        pay_sign_key: "",
        apiclient_cert: "",
        apiclient_key: "",
        mode: "",
        app_id: "",
        private_key: "",
        ali_public_key: ""
    }
})

const formRules: FormRules = {
    name: [
        {
            required: true,
            message: "请输入显示名称"
        }
    ],
    "config.mch_id": [
        {
            required: true,
            message: "请输入微信支付商户号"
        }
    ],
    "config.pay_sign_key": [
        {
            required: true,
            message: "请输入微信支付商户API密钥"
        }
    ],
    "config.apiclient_cert": [
        {
            required: true,
            message: "请输入微信支付证书"
        }
    ],
    "config.apiclient_key": [
        {
            required: true,
            message: "请输入微信支付证书密钥"
        }
    ],
    "config.app_id": [
        {
            required: true,
            message: "请输入支付宝应用ID"
        }
    ],
    "config.private_key": [
        {
            required: true,
            message: "请输入支付宝应用私钥"
        }
    ],
    "config.ali_public_key": [
        {
            required: true,
            message: "请输入支付宝公钥"
        }
    ]
}

const handleSubmit = async () => {
    await formRef.value?.validate()
    await setPayConfig(formData)
    popupRef.value?.close()
    emit("success")
}

const open = () => {
    popupRef.value?.open()
}

const setFormData = (data: Record<any, any>) => {
    for (const key in formData) {
        if (data[key] != null && data[key] != undefined) {
            //@ts-ignore
            formData[key] = data[key]
        }
    }
}

const getDetail = async (row: Record<string, any>) => {
    const data = await getPayConfig({
        id: row.id
    })
    setFormData(data)
}

const handleClose = () => {
    emit("close")
}

defineExpose({
    open,
    setFormData,
    getDetail
})
</script>
